<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="../js/vue.min.js"></script> -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app" class="box">
			<div class="img1" @click="click1">A</div>
			<div class="img2" @click="click2">B</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				img1: "",
				img2: ""
			},
			mounted() {
				this.img1 = document.querySelector(".img1");
				this.img2 = document.querySelector(".img2");
			},
			methods: {
				click1() {
					this.img1.className = "img1 animation1"; //0-180
					this.img2.className = "img2 animation2"; //180-0
				},
				click2() {
					this.img1.className = "img1 animation2"; //180-0
					this.img2.className = "img2 animation1"; //0-180
				}
			}
		})
	</script>
	<style>
		.box {
			position: relative;
			margin: 200px;
		}

		.img1,
		.img2 {
			width: 200px;
			height: 250px;
			position: absolute;
			top: 0;
			left: 0;
		}

		.img1 {
			z-index: 0;
			backface-visibility: hidden;
			background-color: #ffaa7f;
		}

		.img2 {
			z-index: -1;
			/* background-image: url(../img/1.png); */
			background-color: #008000;
		}

		.animation1 {
			/* 0-180 */
			animation: rotate1 1s linear 1;
			animation-fill-mode: forwards;
			animation-direction: alternate;
		}

		.animation2 {
			/* 180-0 */
			animation: rotate2 1s linear 1;
			animation-fill-mode: forwards;
			animation-direction: alternate;
		}

		@keyframes rotate1 {
			from {
				transform: rotateY(0deg);
			}

			to {
				transform: rotateY(180deg);
			}
		}

		@keyframes rotate2 {
			from {
				transform: rotateY(180deg);
			}

			to {
				transform: rotateY(0deg);
			}
		}
	</style>
</html>
